<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>个人信息 - 御物联</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root{
            --primary:#409EFF;
            --stage-bg:#EDE3D3; /* 全屏舞台背景（如截图外层米色） */
            --bg:#F5F7FA;      /* 页面内部背景（卡片外层浅灰） */
            --text:#303133;
            --subtext:#909399;
            --card:#FFFFFF;
            --border:#EBEEF5;
            --ok:#67C23A;
            --warn:#E6A23C;
            --danger:#F56C6C;
        }
        body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; background:var(--stage-bg); color:var(--text); }

        /* 页面容器，限制移动端阅读宽度并居中 */
        .page{ min-height:100vh; padding-bottom:calc(72px + env(safe-area-inset-bottom)); max-width:480px; margin:0 auto; background:var(--bg); }

        /* 页头样式 */
        .header-box{ position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--border); box-shadow:0 -2px 8px rgba(0,0,0,.04); padding:12px; display:flex; justify-content:space-between; align-items:center; margin:0; border-radius:0; }
        .back-btn{ display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font-size:14px; }
        .back-btn:hover{ color:var(--primary); }
        .back-icon{ font-size:18px; }
        .page-title{ font-size:18px; font-weight:600; color:var(--text); }

        /* 用户信息卡片 */
        .user-info-card{ background:var(--card); margin:16px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.03); overflow:hidden; }
        .user-header{ background:var(--primary); padding:24px; text-align:center; color:#fff; }
        .user-avatar{ width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,0.2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:32px; margin:0 auto 12px; border:3px solid rgba(255,255,255,0.3); }
        .user-name{ font-size:24px; font-weight:600; margin-bottom:8px; }
        .user-role{ font-size:14px; opacity:0.9; }

        /* 信息列表 */
        .info-list{ padding:0; }
        .info-item{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
        .info-item:last-child{ border-bottom:none; }
        .info-label{ font-size:14px; color:var(--subtext); }
        .info-value{ font-size:16px; color:var(--text); font-weight:500; }

        /* 功能按钮区域 */
        .action-section{ padding:20px; }
        .action-title{ font-size:16px; font-weight:600; color:var(--text); margin-bottom:16px; }
        .action-buttons{ display:flex; flex-direction:column; gap:12px; }
        .action-btn{ height:48px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); font-size:16px; cursor:pointer; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; gap:8px; }
        .action-btn:hover{ background:var(--bg); }
        .action-btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
        .action-btn.primary:hover{ background:#66b1ff; }
        .action-btn.danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
        .action-btn.danger:hover{ background:#f78989; }

        /* 密码修改弹框 */
        .modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:999; }
        .modal-mask.open{ opacity:1; pointer-events:auto; }
        .modal-dialog{ position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) scale(0.9); background:var(--card); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.15); transition:transform .25s ease; z-index:1000; min-width:320px; max-width:400px; width:90vw; }
        .modal-mask.open .modal-dialog{ transform:translate(-50%, -50%) scale(1); }
        .modal-header{ padding:20px 20px 0; display:flex; align-items:center; justify-content:space-between; }
        .modal-title{ font-size:18px; font-weight:600; color:var(--text); }
        .modal-close{ width:24px; height:24px; border:none; background:none; font-size:20px; color:var(--subtext); cursor:pointer; }
        .modal-body{ padding:20px; }
        .modal-footer{ padding:0 20px 20px; display:flex; gap:12px; }
        .form-group{ margin-bottom:16px; }
        .form-label{ display:block; font-size:14px; color:var(--text); margin-bottom:8px; }
        .form-input{ width:100%; height:40px; border:1px solid var(--border); border-radius:6px; padding:0 12px; font-size:14px; color:var(--text); background:var(--card); }
        .form-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 2px rgba(64,158,255,.2); }
        .error-message{ color:var(--danger); font-size:12px; margin-top:4px; }
        .btn{ height:40px; border-radius:8px; border:1px solid var(--border); background:#fff; color:var(--text); font-size:14px; cursor:pointer; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; }
        .btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
        .btn:hover{ opacity:0.8; }
    </style>
</head>
<body>
    <div class="page">
        <!-- 页头 -->
        <div class="header-box">
            <a href="javascript:history.back()" class="back-btn">
                <span class="back-icon">←</span>
                <span>返回</span>
            </a>
            <div class="page-title">个人信息</div>
            <div style="width:60px;"></div> <!-- 占位，保持标题居中 -->
        </div>

        <!-- 用户信息卡片 -->
        <div class="user-info-card">
            <div class="user-header">
                <div class="user-avatar" id="userAvatar">U</div>
                <div class="user-name" id="userName">用户</div>
                <div class="user-role" id="userRole">-</div>
            </div>
            <div class="info-list">
                <div class="info-item">
                    <div class="info-label">账号</div>
                    <div class="info-value" id="infoAccount">-</div>
                </div>
                <div class="info-item">
                    <div class="info-label">手机号码</div>
                    <div class="info-value" id="infoPhone">-</div>
                </div>
            </div>
        </div>

        <!-- 功能按钮区域 -->
        <div class="action-section">
            <div class="action-title">功能操作</div>
            <div class="action-buttons">
                <button class="action-btn primary" onclick="openPasswordModal()">
                    <span>🔒</span>
                    <span>修改密码</span>
                </button>
                <button class="action-btn" onclick="openControlPanel()">
                    <span>🎛️</span>
                    <span>操作面板展示</span>
                </button>
                <button class="action-btn danger" onclick="logout()">
                    <span>🚪</span>
                    <span>退出登录</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 密码修改弹框 -->
    <div class="modal-mask" id="passwordModal">
        <div class="modal-dialog">
            <div class="modal-header">
                <div class="modal-title">修改密码</div>
                <button class="modal-close" onclick="closePasswordModal()">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">当前密码</label>
                    <input type="password" class="form-input" id="currentPassword" placeholder="请输入当前密码">
                    <div class="error-message" id="currentPasswordError"></div>
                </div>
                <div class="form-group">
                    <label class="form-label">新密码</label>
                    <input type="password" class="form-input" id="newPassword" placeholder="请输入新密码">
                    <div class="error-message" id="newPasswordError"></div>
                </div>
                <div class="form-group">
                    <label class="form-label">确认新密码</label>
                    <input type="password" class="form-input" id="confirmPassword" placeholder="请再次输入新密码">
                    <div class="error-message" id="confirmPasswordError"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" onclick="closePasswordModal()" style="flex:1;">取消</button>
                <button class="btn btn-primary" onclick="submitPasswordChange()" style="flex:1;">确认修改</button>
            </div>
        </div>
    </div>

    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化用户信息显示
            initUserInfo();
        });

        // 初始化用户信息
        function initUserInfo() {
            try {
                const userStr = localStorage.getItem('currentUser');
                const user = userStr ? JSON.parse(userStr) : null;
                
                if (user) {
                    // 设置用户头像和姓名
                    const avatarEl = document.getElementById('userAvatar');
                    const nameEl = document.getElementById('userName');
                    const roleEl = document.getElementById('userRole');
                    const accountEl = document.getElementById('infoAccount');
                    const phoneEl = document.getElementById('infoPhone');
                    
                    if (avatarEl) avatarEl.textContent = (user.name || 'U').slice(0,1);
                    if (nameEl) nameEl.textContent = user.name || '用户';
                    if (roleEl) roleEl.textContent = user.role || '-';
                    if (accountEl) accountEl.textContent = user.account || '-';
                    if (phoneEl) phoneEl.textContent = user.phone || '-';
                } else {
                    // 如果没有用户信息，跳转到登录页面
                    window.location.href = 'mobile-login-demo.html';
                }
            } catch(e) {
                console.error('初始化用户信息时出错:', e);
                window.location.href = 'mobile-login-demo.html';
            }
        }

        // 打开密码修改弹框
        function openPasswordModal() {
            document.getElementById('passwordModal').classList.add('open');
            clearPasswordErrors();
        }

        // 关闭密码修改弹框
        function closePasswordModal() {
            document.getElementById('passwordModal').classList.remove('open');
            clearPasswordErrors();
            // 清空输入框
            document.getElementById('currentPassword').value = '';
            document.getElementById('newPassword').value = '';
            document.getElementById('confirmPassword').value = '';
        }

        // 清空密码错误信息
        function clearPasswordErrors() {
            document.getElementById('currentPasswordError').textContent = '';
            document.getElementById('newPasswordError').textContent = '';
            document.getElementById('confirmPasswordError').textContent = '';
        }

        // 显示密码错误信息
        function showPasswordError(fieldId, message) {
            document.getElementById(fieldId).textContent = message;
        }

        // 验证密码
        function validatePassword() {
            const currentPassword = document.getElementById('currentPassword').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            let isValid = true;
            
            // 清空之前的错误信息
            clearPasswordErrors();
            
            // 验证当前密码
            if (!currentPassword) {
                showPasswordError('currentPasswordError', '请输入当前密码');
                isValid = false;
            }
            
            // 验证新密码
            if (!newPassword) {
                showPasswordError('newPasswordError', '请输入新密码');
                isValid = false;
            } else if (newPassword.length < 6) {
                showPasswordError('newPasswordError', '新密码长度不能少于6位');
                isValid = false;
            }
            
            // 验证确认密码
            if (!confirmPassword) {
                showPasswordError('confirmPasswordError', '请确认新密码');
                isValid = false;
            } else if (newPassword !== confirmPassword) {
                showPasswordError('confirmPasswordError', '两次输入的密码不一致');
                isValid = false;
            }
            
            return isValid;
        }

        // 提交密码修改
        function submitPasswordChange() {
            if (validatePassword()) {
                // 这里可以添加实际的密码修改逻辑
                alert('密码修改成功！');
                closePasswordModal();
            }
        }

        // 打开操作面板
        function openControlPanel() {
            window.location.href = 'control-panel-demo.html';
        }

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                localStorage.removeItem('currentUser');
                window.location.href = 'mobile-login-demo.html';
            }
        }

        // 点击遮罩关闭弹框
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('modal-mask')) {
                e.target.classList.remove('open');
            }
        });

        // Esc键关闭弹框
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closePasswordModal();
            }
        });
    </script>
</body>
</html>
